<!--
* description: 出库单打印
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="出库单打印"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="800px"
      @close="close"
    >
      <dialogHeader
        slot="title"
        title="出库单打印"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
            <div class="outbound" >
                    
            </div>
            
      <div class="filter-container filter-params" style="position: relative;">
        <div class="printMain" ref="print">
          
          <el-button
            size="medium"
            type="primary"
            class="printBtn"
            @click="print"
            
            >打印</el-button>
          <div>
            <h5 class="handle" style="text-align: center; font-size: 21px;">出库单</h5>
          </div>
           
          <div
          
            style="page-break-after:always;"
            class="printInfoP"
            v-for="(item, index) in reqData"
            :key="index"
          >
        
            <div class="printInfo">
          
              <div class="printInfoDiv">
                <div class="printInfoRow">
                  去向编码：{{ item.OUT_STORAGE_CODE }}
                </div>
                <div class="printInfoRow">
                  去向名称：{{ item.PARTNER_SHORT_NAME }}
                </div>
              </div>
              <div class="printInfoDiv">
                <div class="printInfoRow">
                  出库时间：{{ item.CREATED_DATE }}
                </div>
                <div class="printInfoRow">
                  出库仓库：{{ item.WAREHOUSE_NAME }}
                </div>
              </div>
              <div class="printInfoDiv">
                <div class="printInfoRow">
                  托运单号：{{ item.CONSIGN_ORDER_CODE }}
                </div>
                <div class="printInfoRow"></div>
              </div>
            </div>
            <div>
              <table class="abc" border="1px " width="97%" style="text-align:center">
                
                <tr>
                  <th>序号</th>
                  <th>出库单号</th>
                  <th>备件编号</th>
                  <th>备件名称</th>
                  <th>数量</th>
                  <th>箱号</th>
                  <th>出库类别</th>
                </tr>
                <tr v-for="(itemTable, index) in item.bodyList" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ itemTable.OUT_CODE }}</td>
                  <td>{{ itemTable.PART_NO }}</td>
                  <td>{{ itemTable.PART_NAME }}</td>
                  <td>{{ itemTable.OUT_QTY }}</td>
                  <td>{{ itemTable.CASE_CODE }}</td>
                  <td>{{ itemTable.ORDER_TYPE_NAME }}</td>
                  
                </tr>
              </table>
            </div>
            <div class="footer">第1页</div>
          </div>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer"></div> -->
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    rowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 是否显示
      showDialog: this.isShow,
      reqData: []
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    queryTable() {
      request({
        url: "/mp/wm/vl/warehouse/pack/printingOutCode.do",
        method: "post",
        data: {
          CONSIGN_ORDER_CODE: this.rowData.CONSIGN_ORDER_CODE
        }
      }).then(res => {
        if (res.listRow && res.listRow.length > 0) {
          this.reqData = res.listRow;
        }
      });
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    print() {
      
      // let styles = `@page{size: auto; margin: 0mm;} .footer {display: none;}`;
      let styles = `@page{size: auto; margin: 20mm;} .footer {display: none;}
      .printBtn {display: none;} .printInfoP {padding-top: 20px;font-size: 10px;} 
      .printInfo {padding-left: 0px} .printInfoDiv {width: 150px;display: inline-block;}
       .printInfoRow { padding: -150px 20px; }.abc { border-collapse: collapse;}  .handle {text-align: center;}`;
      this.$printJs.printByEle(this.$refs.print, styles);
      this.$printJs.getStyle(this.$refs.print);
      this.showDialog = false;
      this.$emit("detailClose");
    }
  }
};
</script>
<style lang="scss" scoped>
.printMain {
  width: 100%;
  .printInfo {
    padding-left: 90px;
    text-align: left;
    .printInfoDiv {
      display: flex;
      // display: inline-block;
      justify-content: space-between;
      .printInfoRow {
        padding-bottom: -50px;
        flex: 1;
      }
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
   
  }
}
.printBtn {
  position: fixed;
  z-index: 99999999;
  line-height: 24px;
  margin-left: -100px;
}
.outbound {
  text-align: center;
}

</style>
